<template>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #87CEFA;">
      <div class="container">
        <router-link to="/" class="navbar-brand">后台页面</router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item" v-if="username">
              <div class="dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                  {{ username }}已经登录
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><router-link to="/" class="dropdown-item">主页</router-link></li>
                  <li><button class="dropdown-item" @click="logout">退出登录</button></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  
  const username = ref('');
  
  const logout = () => {
    localStorage.removeItem('username')
    router.push({ name: 'Home' })
    username.value = ''
  }
  
  onMounted(() => {
    const storedUsername = localStorage.getItem('username')
    if (storedUsername) {
      username.value = storedUsername
    }
  })
  </script>
  
  <style scoped>
  /* .navbar {
    background-color: #87CEFA;
  } */
  .nav-link {
    color: #fff;
  }
  
  .nav-link:hover {
    color: #ddd;
  }
  
  .nav-link:active {
    color: CornflowerBlue;
  }
  
  @media (max-width: 768px) {
    .navbar-brand {
      font-size: calc(1rem + 0.2vw);
    }
  }
  </style>
  